<template>
    <div class="query">
      <div class="content">
        <h3>查询条件</h3>
        <el-form :inline="true" >
          <el-form-item label="文章标题">
            <el-input  placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="编辑">
            <el-select placeholder="全部"  size="small"></el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="全部"  size="small"></el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="search" type="primary" size="small">查询</el-button>
            <el-button @click="reset"  size="small">重置</el-button>
          </el-form-item>
        </el-form>

        <h3>资讯列表
          <el-button type="primary" size="small" style="margin-left: 20px;margin-top: 30px;" @click="add">添加咨询</el-button>
        </h3>

        <el-dialog title="添加资讯" :visible.sync="dialogVisible" width="40%">
          <el-form>
            <el-form-item label="文章标题:" :label-width="formWidth">
              <el-input autocomplete="off" placeholder="请输入名称" v-model="name" ></el-input>
            </el-form-item>

            <el-form-item label="缩略图:" :label-width="formWidth">

              <el-upload
                v-model="image"
                class="upload-demo"
                action="http://yanghuan-test.oss-cn-chengdu.aliyuncs.com"
                :show-file-list="true"
                :data="dataObj"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                multiple
                :limit="3">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="来源:" :label-width="formWidth">
              <el-radio-group v-model="radio">
                <el-radio label="1" v-model="source">平台原创</el-radio>
                <el-radio label="2" v-model="source">网络转载</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="编辑作者:" :label-width="formWidth" size="medium">
              <el-select  v-model="author" placeholder="Abandon健康平台原创" style="width: 575px;">
                <el-option label="Abandon健康平台原创" value=""></el-option>
                <el-option label="yanghuan" value=""></el-option>
                <el-option label="jinghao" value=""></el-option>
                <el-option label="zhuzhiying" value=""></el-option>
                <el-option label="zhenglinhui" value=""></el-option>
                <el-option label="zhaoyang" value=""></el-option>
              </el-select>
            </el-form-item>

            <FuncFormsEdit></FuncFormsEdit>


          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>

          </div>
        </el-dialog>

      </div>
    </div>
  </template>

<script>


    import Quill from 'quill'
    import FuncFormsEdit from "../FuncFormsEdit";
    Quill.register('modules/FuncFormsEdit', FuncFormsEdit)

    export default {
        name: "query",
      data(){
          return{
            dialogVisible: false,
            radio: '1',
            dataObj: {
              policy: '',
              signature: '',
              key: '',
              OSSAccessKeyId: '',
              dir: '',
              host: ''
            },
            url:'',
            name:'',
            author:'',
            image:'',
            source:'',
          }
      },
      comments:{
        FuncFormsEdit
      },
      methods:{
          add(){
            // this.axios.get("/oss/getPolicy")
            //   .then(response =>{
            //     // console.log(response.data)
            //     this.time = ""+Date.now()
            //     this.dataObj.policy = response.data.policy
            //     this.dataObj.signature = response.data.signature
            //     this.dataObj.OSSAccessKeyId = response.data.accessid
            //     this.dataObj.key = response.data.dir + this.time + '_${filename}'
            //     this.dataObj.dir = response.data.dir
            //     this.dataObj.host = response.data.host
            //     console.log("ready")
            //
            //   })
            this.dialogVisible = true

          },
        handleAvatarSuccess(){
            /*alert("success")*/
          console.log(this.url)
          this.image = this.url

          //this.dialogVisible = false
          alert("success!")
        },
        beforeAvatarUpload(file) {
          // const isJPG = file.type === 'image/jpeg';
          // const isLt2M = file.size / 1024 / 1024 < 2;
          //
          // if (!isJPG) {
          //     this.$message.error('上传头像图片只能是 JPG 格式!');
          // }
          // if (!isLt2M) {
          //     this.$message.error('上传头像图片大小不能超过 2MB!');
          // }
          // return isJPG && isLt2M;
          this.url = "http://yanghuan-test.oss-cn-chengdu.aliyuncs.com/"+this.dataObj.dir+this.time+"_"+file.name
          // let data = {
          //   id: this.online.id,
          //   img: this.url
          // }
          // this.axios.post("micro-sys-server/sys/changeHead",data,).then(res => {
          //   console.log(res)
          // });
          //修改数据库字段
        },
        confirm(){
            let data={
              name:this.name,
              image: this.url,
              source:this.source,
              author: this.author,
            }
          this.axios.post("micro-content-server/message/add",data,).then(res => {
               //console.log(res)
              console.log(res);
              if(response.status == 200){
                console.log("--------------------");

                console.log(res.data.code);

                this.dialogVisible = false;
                //打印添加成功
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
              }


             });
            //发请求增加资讯
        }

    }
    }
</script>

<style scoped>
  .query{
    /*height: 250px;*/
    border: 1px solid white;
    width: 96%;
    margin: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: white;
  }

</style>
